<template>
  <view class="flex-col page">
	<view v-if="sharedRoomList.length!=0" class="flex-row justify-between items-center section_3">
	<view>
	  <uni-swipe-action-item class="list" v-for="(item, index) in sharedRoomList" :key="index" :right-options="options" @click="onClick(item)" @change="swipeChange()">
	    <view class="list_line"></view>
		<view class="flex-row">
	      <image class="image_5" src="../../static/images/touxiang.png" />
			<view class="text">
				<view class="text_title">实验室:{{item.name}}共享给用户*******{{item.user.slice(7)}}</view>
			</view>
	    </view>
		<view class="list_line"></view>
	  </uni-swipe-action-item>
	</view>
	</view>
	
	
	<view v-else class="flex-col items-center flex-auto group_2 space-y-28">
		<image class="image_6" src="../../static/images/3df4f07884a8ad9ee9c75f6b2f977539.png" /> 
		<text class="font_2 text_5">没有共享设备给用户</text>
	</view>
	
	<view class="flex-col items-center button fixed-bottom">
	  <image class="image_7" src="../../static/images/b6902d6f4308bf267c7b11f0b4adfaac.png" @click="clicklistitem()"/>
	  <text class="font_2 text_6" @click="clicklistitem()">添加共享</text>
	</view>
  </view>
</template>

<script>
  import uniList from "@/uni_modules/uni-list/components/uni-list/uni-list.vue"
  import uniListItem from "@/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue"
  //根据该实验室拥有者的实验室id查询使用该实验室的使用者
  import { _searchSharedLabById } from '@/service/laborroom.js'
  //取消某实验室的共享（共享与被共享者均可操作）
  import { _cancelSharedLab } from '@/service/laborroom.js'
  export default {
    components: {uniList,uniListItem},
    data() {
      return {
		  name:'',
		  id:'',
		  sharedRoomList:[],
		  options: [{
		  			isImage: true,
		  			src: '../../static/images/delete.png',
		  			style: {
		  				backgroundColor: '#5F9EA0',
		  				imgWidth: '64rpx',
		  				imgHeight: '72rpx'
		  		}
		  	}],
		  account:'',
	  };
    },
	created(){
		this.getsharingData();
	},
	
	onShow() {
		try {
			const value = uni.getStorageSync('sharingroom1');
			if (value) {
				console.log(value)
				this.name = value.name;
				this.id=value.id;
				this.account=value.owner
			}
		} catch (e) {
			console.error(e);
		}
	},

    methods: {
		dateFormat(registertime) {
		    let date = new Date(registertime);
		    let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			let hours = date.getHours();
			let minutes = date.getMinutes();
			let seconds = date.getSeconds();
		    return year + "/" + month + "/" + day+"  "+hours+":"+minutes+"共享";
		},
		// 跳转链接
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		
		async getsharingData(){
			console.log(this.id)
			let data = {
				ownerId:this.id
			}
			let res = await _searchSharedLabById(data);
			this.sharedRoomList=res.data;
			console.log(this.sharedRoomList);
		},
		
		clicklistitem(data){
			console.log(data);
			uni.setStorage({
				key: 'sharingroom2',  
				data: {
					name:this.name,
					id:this.id
				}
			});
			this.navTo('/pages/sharingroom2/sharingroom2')
		},
		async delete(account){
			let data = {
				name:this.name,
				user:account
			}
			let res = await _cancelSharedLab(data);
			console.log(res.data);
			//关闭当前界面跳转到当前界面用于刷新界面
			uni.redirectTo({
				url:'/pages//sharingroom1/sharingroom1'
			})
		},
		onClick(data){
			console.log(data)
			uni.showModal({
				content:'是否取消此共享',
				showCancel:true,
				cancelText:'取消',
				confirmText:'确定',
				success:(res)=>{
					if(res.confirm){
						console.log(data.user)
						this.delete(data.user);
					}else if(res.cancel){
						console.log('用户点击取消')
					}
				}
			})
		},
		swipeChange(e){

		}
	},
  };
</script>

<style scoped lang="scss">
  .page {
    background-color: #ffffff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
	.section_3 {
	  // padding: 62.5rpx 0rpx 42.5rpx 50.17rpx;
	  padding-top: 8%;
	  padding-left: 10%;
	  // font-weight: bold;
	  .font_3{
		margin-left: 0rpx;
	  }
	}
	.group_2{
		padding: 429.17rpx 0 333.33rpx;
		overflow-y: auto;
		.image_6 {
		  width: 154.17rpx;
		  height: 147.92rpx;
		}
		.text_5 {
		  color: #a6a6a6;
		}
	}
	.button {
	  .image_7 {
	    width: 54.17rpx;
	    height: 54.17rpx;
		margin-top: 35rpx;
	  }
	  .text_6 {
	    color: #808080;
	  }
	}
	
	.image_5 {
	  width: 60rpx;
	  height: 60rpx;
	  margin-right: 2%;
	}
	.font_2 {
	  font-size: 31.25rpx;
	  font-family: SourceHanSansCN;
	  line-height: 29.17rpx;
	}
  }
  .flex-row {
    display: flex;
    align-items: center; 
  }
  .fixed-bottom {
    position: fixed;
    // left: 0;
    bottom: 3%;
	left: 41%;
  }
  

  .text_title {
	max-width: 500rpx;
    font-size: 32rpx;
	// margin-left: 2%;
	white-space: nowrap; /* 禁止换行 */
	overflow: hidden; /* 超出部分隐藏 */
	text-overflow: ellipsis; /* 超出部分用省略号表示 */
   }
   .list{
  	margin-top: -5.865%;
	width: 600rpx;
   }
   .list_line{
  	width: 105%;
  	margin-left: -2%;
  	margin-top: 3%;
  	height: 0.1px;
  	background-color: #ccc;
  	opacity: 0.35;
  	margin-bottom: 3%;
   }
</style>